<template>
  <div class="backgroundWhite height100">
    <navs :title="detail.name" fixed></navs>
    <img class="bgimg" v-default-img :src="$oss + detail.cover" alt="" />
    <div class="backgroundWhite positionRe main ts p16">
      <div class="colorGrey ft32 fb">{{ detail.name }}</div>
      <van-tag color="#F3F7FD" text-color="#2D65AC" size="large">{{
        detail.unit_name
      }}</van-tag>
      <div class="u-f u-f-ac mt16">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-wode1"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28">{{
          `${detail.contact_person} - ${detail.contact_phone}`
        }}</label>
      </div>
      <div class="u-f u-f-ac mt16">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-time"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28">{{
          `${detail.startDate} - ${
            detail.join_way == 1 ? '线下参加' : '线上参加'
          }`
        }}</label>
      </div>
      <div class="u-f u-f-ac mt16 mb28">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-address"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28 ellipsis-1">{{
          detail.address
        }}</label>
      </div>
      <van-divider />
      <div class="mt28 mb16 pb40">
        <div class="ft32 fb u-f u-f-ac">
          <div class="line mr8"></div>
          <label class="colorGrey">活动简介（须知）</label>
        </div>
        <div class="positionRe">
          <svg
            class="icon positionAb ft28"
            aria-hidden="true"
            style="top: -0.106rem; right: 0.333rem"
          >
            <use xlink:href="#icon-icon"></use>
          </svg>
          <div class="content ft28 color525 mt28">
            {{ detail.intro }}
          </div>
        </div>
      </div>
      <div class="p20 bottom_fixed">
        <van-button
          v-if="is_signup"
          round
          block
          color="#2D65AC"
          @click="clickSignUp"
        >
          立即报名
        </van-button>
        <van-button
          v-else
          class="colorPrimary"
          round
          block
          color="#F3F7FD"
          text-color="#2D65AC"
          @click="clickSignUp"
        >
          取消报名
        </van-button>
      </div>
    </div>
  </div>
  <success :isShow="isSuccess" text="报名成功">
    <p>您的活动预约已成功，相关详情可在个人中心查看。</p>
  </success>
</template>

<script setup>
import success from '@/components/success.vue'
import { getCurrentInstance, onBeforeMount, ref } from 'vue'
import { useRoute } from 'vue-router'

let isSuccess = ref(false) //报名是否成功
const route = useRoute()
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
let detail = ref({})
let id = route.params.id
onBeforeMount(async () => {
  let res = await _this.$api.user.getActivityInfo(id)
  detail.value = res.data
  detail.value.startDate = _this.$utils.parseTime(
    detail.value.start_time,
    '{y}-{m}-{d} {h}:{i}'
  )
  let date = Date.now()
  let startDate = new Date(detail.value.start_time.replace(/-/g, '/')).getTime()
  let endDate = new Date(detail.value.end_time.replace(/-/g, '/')).getTime()
})
// 点击报名
const clickSignUp = () => {
  _this.$api.activity.activitySignUp(id).then((res) => {
    if (res.code == 0) {
      isSuccess.value = true
    }
  })
}
</script>

<style scoped lang="scss">
.main {
  margin-top: -0.666667rem;
  border-radius: 0.426667rem 0.426667rem 0px 0px;
}
.litter-line {
  height: 0.266667rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.content {
  padding: 0.266667rem 0.6rem;
  background: #f9fbfe;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.bottom_fixed {
  @include bottom_fixed;
}
</style>
